<template>

    <div>
        <div class="reader">

            <!--        头部-->
            <div class="readerTopBar">

                <div class="readerTopBar_inner">

                    <!--                左-->
                    <div class="readerTopBar_left">

                        <a href="/" title="微信读书书城" class="readerTopBar_home">微信读书书城</a>

                        <span class="readerTopBar_title">

                        <span class="readerTopBar_title_link">
 {{ book.title }}
                        </span>
                    </span>

                        <div class="readerTopBar_addToShelf_wrapper">

                            <button class="readerTopBar_addToShelf"
                                    @click="toggleShelf">

                                <!--                                未加入-->
                                <svg v-if="!isAdded" width="20" height="20" viewBox="0 0 20 20" fill="none"
                                     xmlns="http://www.w3.org/2000/svg" class="readerTopBar_addToShelf_icon"
                                     data-v-ed9b5592>
                                    <path fill-rule="evenodd" clip-rule="evenodd"
                                          d="M3.95831 2.5H19.1666V3.125C18.4075 3.695 17.9166 4.6025 17.9166 5.625C17.9166 6.6475 18.4075 7.555 19.1666 8.125V8.75H3.95831C2.23248 8.75 0.833313 7.35083 0.833313 5.625C0.833313 3.89917 2.23248 2.5 3.95831 2.5ZM17.0917 7.5C16.8158 6.92 16.6667 6.27917 16.6667 5.625C16.6667 4.97083 16.8158 4.33 17.0917 3.75H3.95833C2.92417 3.75 2.08333 4.59083 2.08333 5.625C2.08333 6.65917 2.92417 7.5 3.95833 7.5H17.0917ZM0.833355 10.4173H16.0417C17.7675 10.4173 19.1667 11.8165 19.1667 13.5423C19.1667 15.2682 17.7675 16.6673 16.0417 16.6673H14.1667V15.4173H16.0417C17.0759 15.4173 17.9167 14.5765 17.9167 13.5423C17.9167 12.5082 17.0759 11.6673 16.0417 11.6673H2.90835C3.18419 12.2473 3.33335 12.8882 3.33335 13.5423C3.33335 14.1965 3.18419 14.8373 2.90835 15.4173H6.25002V16.6673H0.833355V16.0423C1.59252 15.4723 2.08335 14.5648 2.08335 13.5423C2.08335 12.5198 1.59252 11.6123 0.833355 11.0423V10.4173ZM9.58333 13.3327H10.8333V15.416H12.9167V16.666H10.8333V18.7493H9.58333V16.666H7.5V15.416H9.58333V13.3327Z"
                                          fill="#717882" data-v-ed9b5592></path>
                                </svg>

                                <span v-if="!isAdded">
                                    加入书架
                                </span>

                                <!--                                已加入-->
                                <svg v-if="isAdded" width="20" height="20" viewBox="0 0 20 20" fill="none"
                                     xmlns="http://www.w3.org/2000/svg" class="readerTopBar_addToShelf_icon added"
                                     data-v-2afe440e>
                                    <path fill-rule="evenodd" clip-rule="evenodd"
                                          d="M19.1666 2.5H3.95831C2.23248 2.5 0.833313 3.89917 0.833313 5.625C0.833313 7.35083 2.23248 8.75 3.95831 8.75H19.1666V8.125C18.4075 7.555 17.9166 6.6475 17.9166 5.625C17.9166 4.6025 18.4075 3.695 19.1666 3.125V2.5ZM16.6667 5.625C16.6667 6.27917 16.8158 6.92 17.0917 7.5H3.95833C2.92417 7.5 2.08333 6.65917 2.08333 5.625C2.08333 4.59083 2.92417 3.75 3.95833 3.75H17.0917C16.8158 4.33 16.6667 4.97083 16.6667 5.625ZM16.0417 10.4173H0.833355V11.0423C1.59252 11.6123 2.08336 12.5198 2.08336 13.5423C2.08336 14.5648 1.59252 15.4723 0.833355 16.0423V16.6673H6.25002V15.4173H2.90835C3.18419 14.8373 3.33335 14.1965 3.33335 13.5423C3.33335 12.8882 3.18419 12.2473 2.90835 11.6673H16.0417C17.0759 11.6673 17.9167 12.5082 17.9167 13.5423C17.9167 14.5765 17.0759 15.4173 16.0417 15.4173H14.1667V16.6673H16.0417C17.7675 16.6673 19.1667 15.2682 19.1667 13.5423C19.1667 11.8165 17.7675 10.4173 16.0417 10.4173Z"
                                          fill="#717882" data-v-2afe440e></path>
                                    <path d="M13.358 14.6085L12.4741 13.7246L9.58273 16.616L8.358 15.3913L7.47412 16.2752L9.58273 18.3838L13.358 14.6085Z"
                                          fill="#717882" data-v-2afe440e></path>
                                </svg>
                            </button>
                        </div>

                    </div>

                    <!--                右-->
                    <div class="readerTopBar_right">
                        <router-link to="/" class="readerTopBar_link">
                            首页
                        </router-link>

                        <span class="readerTopBar_link_sep">

                    </span>

                        <router-link to="/shelf" class="readerTopBar_link">
                            我的书架
                        </router-link>

                        <span class="readerTopBar_link_sep">

                    </span>

                        <div class="reader_navBarMenu">

                            <div class="readerTopBar_avatar">

                                <img src="https://res.weread.qq.com/wravatar/WV0013-5gNLR4T6gryRdmEDFWge3c3/96" alt=""
                                     class="wr_avatar_img">
                            </div>

                        </div>
                    </div>

                </div>

            </div>

            <!--        阅读区-->
            <div style="width: 100%;height: 100%;">
                <div class="container">
                    <div class="readerChapterContent">

                        <div class="preRenderContainer">
                            <div class="preRenderContent">

                            </div>
                        </div>

                        <div style="width: 100%;
    height: 100%;
    position: relative;">

                            <div class="horizontalReaderCoverPage">

                                <!--                                左侧-->
                                <div class="horizontalReaderCoverPage_content">

                                    <div class="horizontalReaderCoverPage_content_header">

                                        <div class="wr_bookCover bookInfo_cover">
                                        </div>

                                        <span class="content_bookTitle">
<!--                                                Vue.js设计与实现-->
                                            {{ book.title }}
                                            </span>

                                        <span class="content_author">
<!--                                                霍春阳　著-->
                                            {{ book.author }}
                                            </span>

                                    </div>
                                </div>

                                <!--                                右侧-->
                                <div class="horizontalReaderCoverPage_content-right">
                                    <span class="content_rightTitle">
                                        简介
                                    </span>
                                    <p class="bookInfo_intro_hasMore">
                                        {{ book.detail }}
                                    </p>
                                </div>

                                <!--                                翻页-->
                                <div class="renderTarget_pager">
                                    <div class="renderTarget_pager_left">

                                        <button class="renderTarget_pager_button">

                                            <span class="renderTarget_pager_icon">

                                            </span>

                                            <span>
                                                上一页
                                            </span>
                                        </button>
                                    </div>

                                    <div class="renderTarget_pager_right">
                                        <button class="renderTarget_pager_button_right">
                                             <span>
                                                下一页
                                            </span>

                                            <span class="renderTarget_pager_icon_right">

                                            </span>


                                        </button>
                                    </div>
                                </div>


                            </div>

                        </div>

                    </div>
                </div>

            </div>

        </div>

    </div>


</template>

<script>
    import axios from 'axios';

    export default {
        name: "reader",

        data() {
            return {
                isAdded: false, // 控制书架状态
                book: {}, // 当前书籍的详情
                shelfBooks: [] // 保存书架书籍数据
            };
        },

        mounted() {
            this.fetchShelfBooks();
        },

        methods: {
            toggleShelf() {
                this.isAdded = !this.isAdded; // 切换已加入书架状态
            },

            // 获取书架数据
            fetchShelfBooks() {
                axios.get('/api/shelf-books')
                    .then(response => {
                        if (response.data.code === 200) {
                            this.shelfBooks = response.data.data;
                            this.fetchBookDetails();
                            console.log("书架数据", this.shelfBooks)
                        }
                    })
                    .catch(error => console.error('获取书架数据失败:', error));
            },

            // 根据 id 获取书籍详情
            // fetchBookDetails() {
            //     const bookId = this.$route.query.id; // URL中的id
            //     const book = this.shelfBooks.find(b => b.id === bookId);
            //     if (book) {
            //         this.book = book;
            //     } else {
            //         console.error('未找到书籍');
            //     }
            // },

            fetchBookDetails() {
                // 获取 URL 中的 id 参数
                const bookId = this.$route.query.id;

                // 遍历 shelfBooks 数组，找到匹配的书籍
                let book = null;
                for (let i = 0; i < this.shelfBooks.length; i++) {
                    if (this.shelfBooks[i].id === bookId) {
                        book = this.shelfBooks[i];
                        break; // 找到书籍后跳出循环
                    }
                }

                // 如果找到了书籍，则保存到 this.book
                if (book !== null) {
                    this.book = book;
                } else {
                    console.error('未找到书籍');
                }
            },


        },


    }
</script>

<style scoped>

    .reader {
        min-height: 100vh;
        background-color: #f4f5f7;
        height: 100vh;
        width: 100vw;
        overflow: hidden;
        box-sizing: border-box;
    }

    a {
        text-decoration: none;
    }

    .readerTopBar {
        padding: 0;
        box-sizing: border-box;
        position: fixed;
        top: 0;
        align-items: center;
        display: flex;
        height: 72px;
        margin-left: auto;
        margin-right: auto;
        z-index: 80;
        width: 80%;
        max-width: calc(100vw - 224px);
        left: 10%;
    }

    .readerTopBar_inner {
        align-items: center;
        justify-content: space-between;
        display: flex;
        flex: 1;
    }

    .readerTopBar_left {
        display: flex;
        flex-direction: row;
        align-items: center;
        flex: auto;
        margin-right: 26px;
    }

    .readerTopBar_home {
        flex: none;
        width: 20px;
        height: 20px;
        background-image: url(https://cdn.weread.qq.com/web/wrwebnjlogic/image/web_nav_logo_light.55c74ef3.svg);
        background-repeat: no-repeat;
        background-size: 20px 20px;
        text-indent: -999em;
    }

    /*:hover 伪类方法，鼠标移入时更换背景图*/
    .readerTopBar_home:hover {
        background-image: url(https://cdn.weread.qq.com/web/wrwebnjlogic/image/web_nav_logo_hover.091f61ee.svg);
    }

    /*.left {*/
    /*    width: 48px;*/
    /*    overflow: visible;*/
    /*    position: absolute;*/
    /*    z-index: 10;*/
    /*    right: -80px;*/
    /*    transform: translateY(-50%);*/
    /*    top: 50%;*/
    /*    align-items: flex-end;*/
    /*    left: unset;*/
    /*    bottom: unset;*/
    /*}*/

    .readerTopBar_title {
        line-height: 24px;
        overflow: hidden;
        height: 24px;
        display: -webkit-box;
        text-overflow: ellipsis;
        -webkit-box-orient: vertical;
        -webkit-text-size-adjust: none;
        margin: 0 16px;
    }

    .readerTopBar_title_link {
        color: #5d646e;
        cursor: pointer;
        line-height: 24px;
        overflow: hidden;
        height: 24px;
        display: -webkit-box;
        display: -moz-box;
        text-overflow: ellipsis;
        -webkit-box-orient: vertical;
        -webkit-text-size-adjust: none;
        font-size: 16px;
        font-weight: 500;
    }

    .readerTopBar_title_link:hover {
        color: #212832;
    }


    .readerTopBar_addToShelf_wrapper {
        flex-shrink: 0;
        margin-right: 24px;
    }

    /*加入未加入button*/
    .readerTopBar_addToShelf {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 14px;
        line-height: 22px;
        color: #717882;
        font-weight: 500;
        cursor: pointer;
        background: none;
        border: 0;
        padding: 0;
        text-decoration: none;
    }

    .readerTopBar_addToShelf:hover {
        color: #212832;
    }

    .readerTopBar_link:hover {
        color: #212832;
    }

    /*.readerTopBar_addToShelf:hover .readerTopBar_addToShelf_icon {*/
    /*    color: #212832;*/
    /*}*/

    .readerTopBar_addToShelf_icon {
        display: block;
        width: 20px;
        height: 20px;
        margin-right: 4px;
        /*color: #717882;*/
        fill: #717882;
        font-size: 14px;
        line-height: 22px;
        font-weight: 500;
    }

    /*.readerTopBar_addToShelf_icon path:hover{*/
    /*      fill:#212832;*/
    /*  }*/

    .readerTopBar_addToShelf_icon:hover path {
        fill: #212832;
    }

    .readerTopBar_right {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .readerTopBar_link {
        color: #717882;
        font-size: 14px;
        line-height: 20px;
        font-weight: 500;
    }

    .readerTopBar_link_sep {
        height: 16px;
        width: 1px;
        display: block;
        background: #626468;
        margin: 0 16px;
    }

    .reader_navBarMenu {
        flex-shrink: 0;
        position: relative;
    }

    .readerTopBar_avatar {
        width: 32px;
        height: 32px;
        border: 3px solid transparent;
        background: transparent;
        cursor: pointer;
    }

    .wr_avatar_img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        vertical-align: top;
    }

    .container {
        background-color: #f4f5f7;
        transition: background-color .2s ease-in-out;
        display: flex;
        flex-direction: column;
        height: 100%;
        width: 100%;
        align-items: center;
    }

    .readerChapterContent {
        font-size: 18px;
        box-shadow: 0 0 60px 0 rgba(0, 0, 0, .03);
        background-color: #fff;
        position: relative;
        border-radius: 16px;
        min-width: 0;
        min-height: 0;
        width: 80%;
        max-width: calc(100vw - 224px);
        height: calc(100% - 132px);
        margin-top: 72px;
        transition: background-color .2s ease-in-out;
        text-align: justify;
    }

    .preRenderContainer {
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        overflow: hidden;
        word-break: break-all;
        word-wrap: break-word;
    }

    .preRenderContent {
        height: 429px;
        column-gap: 0px;
        padding-top: 84px;
        padding-bottom: 70px;
        width: 393px;
        column-width: 393px;
        overflow-y: hidden;
        margin: 0 !important;
        box-sizing: border-box;
        max-width: inherit;
        -moz-column-fill: auto;
        column-fill: auto;
        opacity: 0;
        widows: 1;
        orphans: 1;
    }

    .horizontalReaderCoverPage {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        display: flex;
        flex-direction: row;
    }

    .horizontalReaderCoverPage_content {
        flex: .5;
        margin: 84px 70px 90px 90px;
        padding: 0 24px;
        flex-direction: column;
        display: flex;
        position: relative;
        overflow: hidden;
    }

    .horizontalReaderCoverPage_content_header {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: 0;
    }

    .wr_bookCover bookInfo_cover {
        overflow: hidden;
        height: auto;
        width: auto;
        position: relative;
    }

    .content_bookTitle {
        margin-top: 16px;
        font-family: "SourceHanSerifCN-Bold", PingFang SC, -apple-system, SF UI Text, Lucida Grande, STheiti, Microsoft YaHei, sans-serif;
        font-size: 23px;
        line-height: 30px;
        text-align: center;
        max-width: 360px;
        flex-shrink: 0;
        color: #212832;
        font-weight: 600;
    }

    .content_author {
        margin-top: 8px;
        font-size: 14px;
        color: #1b88ee;
        line-height: 22px;
        font-family: "SourceHanSerifCN-Bold", PingFang SC, -apple-system, SF UI Text, Lucida Grande, STheiti, Microsoft YaHei, sans-serif;
        flex-shrink: 0;
        font-weight: 600;
    }

    .horizontalReaderCoverPage_content-right {
        margin: 65px 90px 90px 70px;
        padding: 0;
        justify-content: flex-start;
        flex: .5;
        flex-direction: column;
        display: flex;
        position: relative;
        overflow: hidden;
    }

    .bookInfo_intro_hasMore {
        margin-bottom: 23px;
        color: #212832;
        position: relative;
        cursor: pointer;
        text-align: justify;
        line-height: 34px;
        white-space: pre-line;
        font-size: 18px;
        overflow: hidden;
        flex-shrink: 1;
        /*white-space: nowrap;*/
    }

    .bookInfo_intro_hasMore:hover {
        color: #5d646e;
    }

    /*.bookInfo_intro_hasMore::after {*/
    /*    color: #1b88ee;*/
    /*    background-image: linear-gradient(90deg, hsla(0, 0%, 100%, .0001), #fff 51.56%, #fff);*/
    /*    content: "更多";*/
    /*    position: absolute;*/
    /*    bottom: 2px;*/
    /*    right: 0px;*/
    /*    font-size: 18px;*/
    /*    font-weight: 500;*/
    /*    line-height: 18px;*/
    /*    padding-left: 40px;*/
    /*    transition: background-image 0.2s ease-in-out;*/
    /*}*/


    .content_rightTitle {
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 34px;
        position: absolute;
        right: 0;
        top: -50px;
        color: #858c96;
    }

    .renderTarget_pager {
        position: absolute;
        left: 66px;
        right: 66px;
        display: flex;
        flex-direction: row;
        align-items: center;
        bottom: 24px;
        height: 32px;
        z-index: 10;
    }

    .renderTarget_pager_left {
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: absolute;
        height: 32px;
        width: 396px;
    }

    .renderTarget_pager_button {
        background-color: white;
        color: #5d646e;
        border-color: rgba(0, 0, 0, .1);
        height: 32px;
        font-size: 13px;
        font-weight: 500;
        border-radius: 100px;
        cursor: pointer;
        z-index: 3;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding-left: 8px;
        padding-right: 12px;
    }

    .renderTarget_pager_button:hover {
        background-color: #f7f7f7;
    }

    .renderTarget_pager_icon {
        height: 12px;
        width: 12px;
        background: url(https://cdn.weread.qq.com/web/wrwebnjlogic/image/icon_arrow_left.47ad288a.png) no-repeat;
        background-size: 100%;
        margin-right: 2px;
    }

    .renderTarget_pager_right {
        flex-direction: row-reverse;
        right: 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: absolute;
        height: 32px;
        width: 396px;
    }

    .renderTarget_pager_button_right {
        background-color: white;
        color: #5d646e;
        border-color: rgba(0, 0, 0, .1);
        padding-left: 12px;
        padding-right: 8px;
        height: 32px;
        font-size: 13px;
        font-weight: 500;
        border-radius: 100px;
        cursor: pointer;
        z-index: 3;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    .renderTarget_pager_button_right:hover {
        background-color: #f7f7f7;
    }

    .renderTarget_pager_icon_right {
        height: 12px;
        width: 12px;
        background: url(https://cdn.weread.qq.com/web/wrwebnjlogic/image/icon_arrow_right.3a237789.png) no-repeat;
        background-size: 100%;
        margin-left: 2px;
        margin-right: 0;
    }

</style>